<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天下第一帅</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
        window.onload = function () {
            let obtn = document.getElementById('btn');
            obtn.onclick =function () {
                let xhr = new XMLHttpRequest()
                //如果兼容IE^
                if(window.XMLHttpRequest){
                    xhr = new XMLHttpRequest()
                }else{
                    xhr = new ActiveXObject('Microsoft.XMLHttp');
                    //兼容IE6
                }

                //连接
                //第三个参数就是异步和同步,如果是true就是异步,不会影响用户体验
                xhr.open('GET','1.php',true);
                //发送
                xhr.send();
                //接受
                xhr.onreadystatechange(function (res) {
                    //readyState
                        // 0 刚刚创建--初始化
                        //1 已连接
                        //2  已发送
                        //3 已接收--头
                        //4 完事了已接收--内容rea
                    // status就是http 的状态码
                    //     1xx 消息
                    //     2xx 成功
                    //     3xx 重定向
                            // 301 永久重定向--永远请求老地址,浏览器记住了请求的地址
                            // 302 临时重定向
                            //304 重定向到自己的硬盘里(缓存)---意思就是跟你服务器上的内容一样,没有任何变化的情况下,就直接返回304
                        //重定向可见.而转发不可见
                        // 4xx--请求
                        // 5xx服务器内部的问题
                    /*responseText
                    responseXml---以XML的格式来解析*/
                    if(res.readyState==4){
                        if(xhr.status >=200&&xhr.status<300 || xhr.status==304){
                            alert(xhr.responseText)
                        }else{
                            alert('失败')
                        }
                    }
                })
            }
        }
    </script>
</head>
<body>
<button id="btn">提交</button>
</body>
</html>